<?php

namespace JsonLowCode\Traits\Props;

/**
 * 设置固定Affix组件的方法
 */
trait HasAffix
{
    use HasPosition;

    /**
     * 在触发顶部固定后 Affix 的 CSS top 属性（如果没设定，会使用 trigger-top 代替)
     * @param string|int $top 是否js表达式
     * @return $this
     */
    public function top(string|int $top): static
    {
        $top = $isJSExpression ? $top : intval($top);
        return $this->prop('top', $top);
    }

    /**
     * 在触发底部固定后 Affix 的 CSS bottom 属性（如果没设定，会使用 trigger-bottom 代替)
     * @param string|int $bottom 是否js表达式
     * @return $this
     */
    public function bottom(string|int $bottom): static
    {
        $bottom = $isJSExpression ? $bottom : intval($bottom);
        return $this->prop('bottom', $bottom);
    }

    /**
     * 需要监听滚动的元素
     * @param string $listenTo string | HTMLElement | Document | Window | (() => HTMLElement) 是否js表达式
     * @return $this
     */
    public function listenTo(string $listenTo): static
    {
        return $this->prop('listen-to', $listenTo);
    }

    /**
     * 触发顶部固定时，Affix 和目标元素元素的顶部距离（如果没设定，会使用 top 代替
     * @param string|int $triggerTop 是否js表达式
     * @return $this
     */
    public function triggerTop(string|int $triggerTop): static
    {
        $triggerTop = $isJSExpression ? $triggerTop : intval($triggerTop);
        return $this->prop('trigger-top', $triggerTop);
    }

    /**
     * 触发底部固定时，Affix 和目标元素元素的底部距离（如果没设定，会使用 bottom 代替)
     * @param string|int $triggerBottom 是否js表达式
     * @return $this
     */
    public function triggerBottom(string|int $triggerBottom): static
    {
        $triggerBottom = $isJSExpression ? $triggerBottom : intval($triggerBottom);
        return $this->prop('trigger-bottom', $triggerBottom);
    }
}
